<template>
  <div class="flex-contain flex-column background-none">
    <div class="flex-contain flex-column title-area pad20 font-size-14 marBottom10 whiteBox">
      <div v-if="false" class="title-header">
        这是面包屑
      </div>
      <div class="title font-size-20 font-bold mar20-0">
        {{ ruleForm.townName }}
      </div>
      <div class="flex-contain marBottom10">
        <div class="marginRight10">所属社区：{{ ruleForm.communityLabel }}</div>
        <div>小区地址：{{ ruleForm.position }}</div>
      </div>
      <div class="flex-contain">
        <div class="marginRight10">联系人：{{ ruleForm.contactName }}</div>
        <div>联系方式：{{ ruleForm.contactTel }}</div>
      </div>
    </div>
    <div class="flex-contain flex-justify-content-space-between center-area marBottom10">
      <div class="center-left pad20 whiteBox width100">
        <div class="blue-block">
          管网信息
        </div>
        <div class="flex-contain flex-justify-content-space-between">
          <div class="flex-contain flex-column width100">
            <div>
              竣工图纸：
              <span
                :class="{
                  red: ruleForm.jgtz === '0' || ruleForm.jgtz === 0,
                  blue: ruleForm.jgtz === '1' || ruleForm.jgtz === 1
                }"
              >
                {{ boolFormat2(ruleForm.jgtz) }}
              </span>
            </div>
            <div>
              图纸与现场是否匹配：
              <span
                :class="{
                  red: ruleForm.tzyxc === '0' || ruleForm.tzyxc === 0,
                  blue: ruleForm.tzyxc === '1' || ruleForm.tzyxc === 1
                }"
              >
                {{ boolFormat(ruleForm.tzyxc) }}
              </span>
            </div>
            <div>
              周边市政管网是否配套：
              <span
                :class="{
                  red: ruleForm.zbsz === '0' || ruleForm.zbsz === 0,
                  blue: ruleForm.zbsz === '1' || ruleForm.zbsz === 1
                }"
              >
                {{ boolFormat(ruleForm.zbsz) }}
              </span>
            </div>
            <div>
              是否正确接入市政管网：
              <span
                :class="{
                  red: ruleForm.sfzqjrscgw === '0' || ruleForm.sfzqjrscgw === 0,
                  blue: ruleForm.sfzqjrscgw === '1' || ruleForm.sfzqjrscgw === 1
                }"
              >
                {{ boolFormat(ruleForm.sfzqjrscgw) }}
              </span>
            </div>
            <div>与市政管网接入点数：{{ ruleForm.linePoint }}</div>
            <div>
              小区是否实行雨污分流：
              <span
                :class="{
                  red: ruleForm.sfywfl === '0' || ruleForm.sfywfl === 0,
                  blue: ruleForm.sfywfl === '1' || ruleForm.sfywfl === 1
                }"
              >
                {{ boolFormat(ruleForm.sfywfl) }}
              </span>
            </div>
          </div>
          <div class="flex-contain flex-column width100">
            <!--            <div>-->
            <!--              “三水”是否规范接入污水管网-->
            <!--            </div>-->
            <!--            <div>-->
            <!--              厨房废水：-->
            <!--              <span :class="{'red': ruleForm.cffs ==='0' || ruleForm.cffs === 0, 'blue': ruleForm.cffs ==='1' || ruleForm.cffs === 1}">-->
            <!--                {{ boolFormat(ruleForm.cffs) }}-->
            <!--              </span>-->
            <!--            </div>-->
            <!--            <div>-->
            <!--              卫生间污水：-->
            <!--              <span :class="{'red': ruleForm.wsjws ==='0' || ruleForm.wsjws === 0, 'blue': ruleForm.wsjws ==='1' || ruleForm.wsjws === 1}">-->
            <!--                {{ boolFormat(ruleForm.wsjws) }}-->
            <!--              </span>-->
            <!--            </div>-->
            <!--            <div>-->
            <!--              阳台洗衣污水：-->
            <!--              <span :class="{'red': ruleForm.ytxyws ==='0' || ruleForm.ytxyws === 0, 'blue': ruleForm.ytxyws ==='1' || ruleForm.ytxyws === 1}">-->
            <!--                {{ boolFormat(ruleForm.ytxyws) }}-->
            <!--              </span>-->
            <!--            </div>-->
            <div>
              小区物业管理情况：
              <span class="blue">
                {{ boolFormat3(ruleForm) }}
              </span>
            </div>
            <div>其他情况：{{ ruleForm.otherSituation }}</div>
          </div>
        </div>
      </div>
      <div class="default-vertical-line flex-none" style="width: 10px;" />
      <div class="center-right pad20 whiteBox width100">
        <div class="flex-contain flex-column">
          <div class="blue-block flex-none">
            问题汇总
          </div>
          <div class="chart" style="height: 200px;">
            <chart :data="chartData" />
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-area whiteBox pad20">
      <div class="flex-contain">
        <div class="flex-contain flex-column flex-justify-content-center marginRight10">
          <div class="blue-block">房屋信息({{ (houselist || []).length }})</div>
        </div>
        <div class="search" style="margin-bottom: 0;">
          <a-input placeholder="编号" v-model="keywords" class="jvxe-select-input">
            <a-icon slot="prefix" type="search" />
          </a-input>
        </div>
      </div>
      <div class="flex-contain flex-wrap item-list pad20">
        <div v-for="(item, index) in houselist || []" :key="index" class="item" style="width: 33%; margin-bottom: 20px">
          <house-card
            :data="item"
            @edit="edit"
            @goToDetail="goToDetail($event, item)"
            @reloadHouseList="handleChangePage(1)"
          />
        </div>
      </div>
      <a-pagination
        class="flex-contain flex-justify-content-end"
        :disabled="false"
        :total="total"
        :current="pageNo"
        :pageSize="pageSize"
        showQuickJumper
        :showTotal="total => '共 ' + total + ' 条'"
        @change="handleChangePage"
      />
    </div>
    <j-modal
      title="编辑"
      :width="900"
      :visible="dialogVisiable"
      switchFullscreen
      @ok="submitEdit"
      @cancel="dialogVisiable = false"
      cancelText="取消"
    >
      <HouseInfoEdit ref="editForm" :data="nowSelectHouse" @ok="submitCallback" />
    </j-modal>
  </div>
</template>

<script>
import chart from '@/views/components/Town/chart'
import houseCard from '@/views/components/Town/house-card'
import { queryTownById, townTotalInfo } from '@/api/Town'
import { getHouseList } from '@/api/House'
import { getDictList, getDictItemList } from '@/api/system'
import HouseInfoEdit from '@/views/components/Town/HouseInfoEdit.vue'
import debounce from 'lodash/debounce'
export default {
  components: {
    chart,
    houseCard,
    HouseInfoEdit
  },
  data() {
    return {
      houselist: [],
      ruleForm: {},
      chartData: null,
      questionTypeList: [],
      total: 0,
      pageNo: 1,
      pageSize: 6,
      keywords: null,
      dialogVisiable: false,
      nowSelectHouse: null
    }
  },
  computed: {
    id() {
      return (this.$route.query || {}).id
      // // 测试
      // || '1656601780270366722'
      // || '1656249541894848513'
    }
  },
  watch: {
    keywords: {
      handler(v) {
        this.keywordsSearch()
      }
    },
    id: {
      handler(v) {
        if (v) {
          this.refresh()
        }
      },
      immediate: true
    }
  },
  methods: {
    boolFormat(data) {
      return data === '1' || data === 1 ? '是' : '否'
    },
    boolFormat2(data) {
      return data === '1' || data === 1 ? '有' : '无'
    },
    boolFormat3(data) {
      let result = []
      if (data.jrysg === 1 || data.jrysg === '1') {
        result.push('接入雨水管')
      }
      if (data.jrwsgw === 1 || data.jrwsgw === '1') {
        result.push('接入污水管')
      }
      if (data.zpwhj === 1 || data.zpwhj === '1') {
        result.push('直排外环境')
      }
      return result.join('、')
    },
    getData() {
      if (!this.id) {
        return
      }
      const params = {
        id: this.id
      }
      // 获取小区详情
      queryTownById(params).then(res => {
        this.ruleForm = res.result || {}
      })
    },
    getHouseListData(param) {
      if (!this.id) {
        this.total = 0
        this.houselist = []
        return
      }
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        townId: this.id,
        ...(param || {})
      }
      getHouseList(params).then(res => {
        if (res.result) {
          this.total = res.result.total
          this.houselist = res.result.records
        } else {
          this.total = 0
          this.houselist = []
        }
      })
    },
    async getTownTotalInfo() {
      if (!this.id) {
        return
      }

      // 如果问题类型枚举，则先获取字典
      if (Array.isArray(this.questionTypeList) && (this.questionTypeList || []).length === 0) {
        await this.getDictListFun()
      }

      await townTotalInfo(this.id).then(res => {
        let chartData = (res.result.ques || []).map(x => {
          return {
            name: (this.questionTypeList.find(y => y.value + '' === x.quesType + '') || {}).name || x.quesType,
            value: x.queCount
          }
        })
        // 从大到小排序
        chartData = chartData.sort((a, b) => ((b || {}).value || 0) - ((a || {}).value || 0))
        this.chartData = chartData
        console.log(this.chartData)
      })
    },
    async getDictListFun() {
      // 获取问题类型枚举
      const params = {
        dictCode: 'ps_house_question_type',
        pageNo: 1,
        pageSize: 1
      }
      await getDictList(params).then(async res => {
        const dictId = (res.result.records || [])[0].id
        if (dictId) {
          const params = {
            dictId
          }
          await getDictItemList(params).then(res => {
            this.questionTypeList = (res.result.records || []).map(x => {
              return {
                name: x.itemText,
                value: x.itemValue
              }
            })
          })
        }
      })
    },
    handleChangePage(page) {
      this.pageNo = page
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        townId: this.id
      }
      this.getHouseListData(params)
    },
    keywordsSearch: debounce(function(v) {
      // 根据编号搜索
      const params = {
        pageNo: 1,
        pageSize: this.pageSize,
        townId: this.id,
        // 只留一个房屋信息，精确搜索
        houseNo: this.keywords
        // houseNo: '*' + this.keywords + '*'
      }
      this.getHouseListData(params)
    }, 500),
    edit(row) {
      this.dialogVisiable = true
      this.nowSelectHouse = row
    },
    goToDetail(row, item) {
      // console.log(row)
      // console.log(item)
      this.$router.push({
        path: '/hcsjmanage/HouseList/Detail',
        query: {
          item: item
        }
      })
    },
    submitEdit() {
      // console.log(this.ruleForm, 'this.ruleForm')
      this.$refs.editForm.submitForm()
    },
    submitCallback() {
      this.dialogVisiable = false
      // 刷新当前页
      this.refreshHouseList()
    },
    refresh() {
      this.getData()
      this.getHouseListData()
      this.getTownTotalInfo()
    },
    refreshHouseList() {
      this.keywordsSearch()
    }
  }
}
</script>

<style lang="less" scoped>
.title-area {
  .title {
  }
}
.center-area {
  .center-left {
    div {
      margin-bottom: 10px;
    }
  }
  .center-right {
  }
}
.bottom-area {
  .item-list {
    .item {
      margin-right: 0.5%;
      margin-bottom: 10px;
    }
    .item:nth-child(3n) {
      margin-right: 0;
    }
  }
}
</style>
